<template>
  <div class="mine">
    <van-tabs v-model="active"  color="#FDC12C" :line-height="height"	 title-active-color="#FDC12C" swipeable>
      <div class="line"></div>
      <div class="selectTabs">
        <div @click="showActionsheet"><span>酬劳高低</span><img src="@/assets/images/ic_down.png" alt=""></div>
        <div @click="showActionsheet"><span>任务难度</span><img src="@/assets/images/ic_down.png" alt=""></div>
        <div @click="showActionsheet"><span>剩余时间</span><img src="@/assets/images/ic_down.png" alt=""></div>
      </div>
      <div class="tabMain">
      <van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
        <dw-mine-li></dw-mine-li>
      </van-tab>
      </div>
    </van-tabs>

    <van-actionsheet v-model="show">
      <van-picker
        show-toolbar
        title="得现金任务"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-actionsheet>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/8 0008 17:01.
   */
  import dwMineLi from './mineLi.vue'
  export default {
    mounted() {

    },
    components: {
      dwMineLi
    },
    props: {},
    data() {
      return {
        show:false,//上拉菜单
        columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
        active:0,
        height:1,
        tabs:[{title:'全部',},{title:'待完成'},{title:'待审核'},{title:'已通过'},{title:'为通过'},{title:'已作废'}]
      }
    },
    computed: {},
    methods: {
      onConfirm(value, index) {
        console.log(value,index)
        this.show=false
      },
      onCancel() {
        this.show=false
      },
      showActionsheet(){
        this.show=true
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
 .mine{
   width: 100%;
   .line{
     width: 100%;
     height: 0.12rem;
     background: #FAFAFA;
   }
   .selectTabs{
     width: 100%;
     height: 0.8rem;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0 0.33rem;
     box-sizing: border-box;
     color: #333333;
     font-size: 0.26rem;
     div{
       display: flex;
       align-items: center;
     }
     img{
       width: 0.17rem;
       height: 0.1rem;
       margin-left: 0.2rem;
     }
   }
   .tabMain{
     position: fixed;
     top: 1.8rem;
     bottom: 1rem;
     left: 0;
     right: 0;
     overflow: auto;
   }
 }
</style>
